{% extends "base.html" %}

{% block title %}
    {% if project %}编辑项目 - {{ project.name }}{% else %}新建定制项目{% endif %}
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('index') }}">首页</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('intelligent_positioning') }}">智能定制</a></li>
                <li class="breadcrumb-item active">
                    {% if project %}编辑项目{% else %}新建项目{% endif %}
                </li>
            </ol>
        </nav>
    </div>
</div>

<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
            <h2>
                <i class="bi bi-palette me-2"></i>
                {% if project %}编辑项目 - {{ project.name }}{% else %}新建定制项目{% endif %}
            </h2>
            <div class="btn-group">
                <button class="btn btn-outline-secondary" id="saveProject">
                    <i class="bi bi-save me-1"></i>保存项目
                </button>
                <div class="d-flex align-items-center gap-2">
                    <select class="form-select form-select-sm" id="exportFormat" style="width: auto;">
                        <option value="png">PNG格式</option>
                        <option value="tif">TIF格式</option>
                        <option value="psd">PSD格式</option>
                        <option value="jpg">JPG格式</option>
                    </select>
                    <div class="form-check form-check-sm" id="preserveLayersContainer" style="display: none;">
                        <input class="form-check-input" type="checkbox" id="preserveLayers">
                        <label class="form-check-label" for="preserveLayers">
                            保留图层
                        </label>
                    </div>
                    <button class="btn btn-primary" id="exportImage">
                        <i class="bi bi-download me-1"></i>导出图片
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- 左侧控制面板 -->
    <div class="col-lg-3">
        <!-- 项目设置 -->
        <div class="card mb-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-gear me-2"></i>项目设置
                </h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="projectName" class="form-label">项目名称</label>
                    <input type="text" class="form-control" id="projectName" 
                           value="{% if project %}{{ project.name }}{% else %}新建项目{% endif %}" required>
                </div>
                
                <div class="mb-3">
                    <label for="templateSelect" class="form-label">选择底板</label>
                    <div class="select-wrapper">
                        <select class="form-select" id="templateSelect" required>
                            <option value="">请选择底板</option>
                            {% for tmpl in templates %}
                            <option value="{{ tmpl.id }}" 
                                    {% if (project and tmpl.id == project.template_id) or (request.args.get('template_id') and tmpl.id == request.args.get('template_id')|int) %}selected{% endif %}>
                                {{ tmpl.name }} ({{ tmpl.width }}×{{ tmpl.height }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- JSON配置上传 -->
        <div class="card mb-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-upload me-2"></i>上传配置
                </h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="jsonFile" class="form-label">JSON配置文件</label>
                    <input type="file" class="form-control" id="jsonFile" accept=".json">
                    <div class="form-text">上传包含图片信息的JSON文件</div>
                </div>
                
                <button class="btn btn-primary btn-sm w-100" id="uploadJson" disabled>
                    <i class="bi bi-cloud-upload me-1"></i>上传并解析
                </button>
            </div>
        </div>
        
        <!-- 图层列表 -->
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-layers me-2"></i>图层管理
                </h6>
            </div>
            <div class="card-body">
                <div id="layersList" class="layers-list">
                    <div class="text-muted text-center py-3">
                        <i class="bi bi-layers"></i>
                        <div>暂无图层</div>
                        <small>上传JSON文件后自动生成</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 中间画布区域 -->
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0">
                    <i class="bi bi-easel me-2"></i>编辑画布
                </h6>
                <div class="canvas-info">
                    <span class="badge bg-primary" id="canvasInfo">1:1 比例</span>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="canvas-container" id="canvasContainer">
                    <div class="canvas-wrapper">
                        <canvas id="mainCanvas" class="main-canvas"></canvas>
                        <div id="canvasOverlay" class="canvas-overlay"></div>
                    </div>
                    <div class="canvas-placeholder" id="canvasPlaceholder">
                        <i class="bi bi-grid-3x3-gap display-1 text-muted"></i>
                        <h5 class="mt-3 text-muted">选择底板开始编辑</h5>
                        <p class="text-muted">请先选择一个底板模板</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 右侧属性面板 -->
    <div class="col-lg-3">
        <!-- 选中元素属性 -->
        <div class="card mb-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-sliders me-2"></i>属性面板
                </h6>
            </div>
            <div class="card-body">
                <div id="propertiesPanel">
                    <div class="text-muted text-center py-3">
                        <i class="bi bi-mouse"></i>
                        <div>选择元素查看属性</div>
                        <small>点击画布中的图片元素</small>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 操作工具 -->
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-tools me-2"></i>操作工具
                </h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <button class="btn btn-outline-primary" id="fitToRegion" disabled>
                        <i class="bi bi-arrows-angle-expand me-1"></i>适应区域
                    </button>
                    <button class="btn btn-outline-secondary" id="resetTransform" disabled>
                        <i class="bi bi-arrow-clockwise me-1"></i>重置变换
                    </button>
                    <button class="btn btn-outline-danger" id="deleteElement" disabled>
                        <i class="bi bi-trash me-1"></i>删除元素
                    </button>
                </div>
                
                <hr>
                
                <div class="mb-2">
                    <label class="form-label small">快捷键</label>
                    <div class="shortcuts-list">
                        <div class="d-flex justify-content-between">
                            <small>移动:</small>
                            <small class="text-muted">拖拽</small>
                        </div>
                        <div class="d-flex justify-content-between">
                            <small>等比缩放:</small>
                            <small class="text-muted">Shift+拖拽</small>
                        </div>
                        <div class="d-flex justify-content-between">
                            <small>自由调整:</small>
                            <small class="text-muted">Alt+拖拽</small>
                        </div>
                        <div class="d-flex justify-content-between">
                            <small>旋转:</small>
                            <small class="text-muted">Ctrl+拖拽</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 加载遮罩 -->
<div id="loadingOverlay" class="loading-overlay" style="display: none;">
    <div class="loading-spinner">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">加载中...</span>
        </div>
        <div class="mt-2">处理中，请稍候...</div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.canvas-container {
    position: relative;
    background: #f8f9fa;
    min-height: 600px;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-wrapper {
    position: relative;
    display: inline-block;
}

.main-canvas {
    border: 2px solid #dee2e6;
    border-radius: 4px;
    background: white;
    cursor: crosshair;
}

.canvas-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10;
}

.canvas-placeholder {
    text-align: center;
    padding: 4rem 2rem;
}

.layers-list {
    max-height: 300px;
    overflow-y: auto;
}

.layer-item {
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.layer-item:hover {
    background: #f8f9fa;
}

.layer-item.active {
    background: #e7f3ff;
    border-color: #007bff;
}

.layer-preview {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    background: #f8f9fa;
}

.shortcuts-list {
    font-size: 0.875rem;
}

.shortcuts-list > div {
    padding: 2px 0;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-spinner {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
}

.region-overlay {
    position: absolute;
    border: 2px dashed #007bff;
    background: rgba(0, 123, 255, 0.1);
    pointer-events: none;
    z-index: 5;
}

.element-controls {
    position: absolute;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 15;
}

.element-controls button {
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 0.75rem;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
// 初始数据
const PROJECT_DATA = {% if project %}{{ project | tojson | safe }}{% else %}null{% endif %};
const TEMPLATE_DATA = {% if template %}{{ template | tojson | safe }}{% else %}null{% endif %};
const REGIONS_DATA = {% if regions %}{{ regions | tojson | safe }}{% else %}[]{% endif %};
</script>
<script src="{{ url_for('static', filename='js/page_cache.js') }}"></script>
<script src="{{ url_for('static', filename='js/customize_editor.js') }}"></script>
{% endblock %}
